<template>

    <div>
        <button @click="sendGet">发送GET请求</button>
        <button @click="sendPost">发送Post请求</button>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ajaxUpload } from 'element-plus/es/components/upload/src/ajax';
import {ref} from "vue";

async function sendGet() {

    // 写法1 配置式（优点支持更复杂的配置，但复杂，不太建议）
    // axios({
    //     //请求类型
    //     method: 'get',
    //     //请求地址URL
    //     url: 'http://localhost:8080/api/user',
    //     params: { id: 1 }, // GET 参数放在 params
    //     headers: {'X-Custom-Header': 'foo'}
    // }).then((res) => {      //正确响应时的回调函数

    //     console.log(res)

    // }).catch((err) => {     //失败响应时的错误回调函数
    //     console.log(err)
    // })
    

    //写法2 函数式语法糖（优点简单，建议）
    try {
        const response = await axios.get('http://10.225.45.248/api/getMessage', {
            params: { // 查询参数
                page: 1,
                limit: 10
            },
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer token'
            },
            timeout: 5000, // 超时设置
            responseType: 'json' // 响应数据类型
            
        });
        console.log(response.data);
    } catch (error) {     //请求失败时的错误回调
        console.error('请求失败:', error);
    }
}

async function sendPost(){
    
    //第一种 配置式写法
    // axios({
    //     //请求类型
    //     method: 'post',
    //     //请求地址URL
    //     url: 'http://localhost:8080/api/user',
    //     params: { // GET 参数放在 params
    //         id: 1 
    //     }, 
    //     headers: {'X-Custom-Header': 'foo'}
    // }).then((res) => {      //正确响应时的回调函数
    //     console.log(res)
    // }).catch((err) => {     //失败响应时的错误回调函数
    //     console.log(err)
    // })

    //第二种 语法糖写法
    try {   //try/catch处理异步错误
        const response = await axios.post('http://10.225.45.248/api/postMessage', 
            { // 请求体数据 要放在第二个参数
                name: 'John',
                age: 30
            },
            { // 配置选项   配置项作为第三个参数
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                withCredentials: true // 携带跨域cookie
            }
        );
        console.log(response.data);
    } catch (error) {
        console.error('POST 请求失败:', error);
    }
}

</script>

<style scoped>

</style>